<template>
  <div id="BasicLayOut">
    <a-layout style="min-height: 100vh">
      <a-layout-header class="header">
        <GobalHeader />
      </a-layout-header>
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
      <a-layout-footer class="footer">暂时还没想好footer</a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>
#BasicLayOut {
  margin: 0 auto;
}

#BasicLayOut .header {
  margin: 16px;
}

#BasicLayOut .content {
  background: linear-gradient(to right, #aaa, #fff);
  margin: 16px;
}

/*
将底部的属性设置为粘性，这样它会在底部固定，但可以滚动
 */
#BasicLayOut .footer {
  padding: 20px;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 16px;
  background: linear-gradient(to left, #aaa, #fff);
}
</style>
<script setup lang="ts">
import GobalHeader from "@/components/GobalHeader.vue";
</script>
